<template>
  <d2-container>
    <div class="h-full flex flex-col">
      <div>
        <span class="theme-front-color">日期：</span>
        <!--<el-date-picker-->
          <!--v-model="dates"-->
          <!--type="daterange"-->
          <!--range-separator="至"-->
          <!--start-placeholder="开始日期"-->
          <!--end-placeholder="结束日期">-->
        <!--</el-date-picker>-->
        <el-date-picker
          v-model="dataForm.date"
          placeholder="时间"
          style="width: 200px;"
          class="filter-item"
          size="small"
          type="date"
          suffix-icon="el-icon-date"
        >
        </el-date-picker>
        <el-button type="primary" style="margin-left:20px;" @click="getPowerData()">查询</el-button>
      </div>
      <div id="canvas-sankey-container" class="mt-3 flex-1"></div>
    </div>
  </d2-container>
</template>

<script>
  import * as echarts from 'echarts'
  import * as Util from "@/utils";
  import Config from "@/utils/config"
  export default {
    name: 'co2Footprint',
    data() {
      return {
        dataForm:{
          energyType: '',
          date:new Date(),
          dateType: 'date',
          subEnergyType:[],//分项选择值
        },
        dates: [],
        json: {
          nodes: [
            { name: '平台' },
            { name: '水电合并计量' },
            { name: '新大楼' },
            { name: '1层' },
            { name: '3层' },
            { name: '5层' },
            { name: '2层' },
            { name: '103房' },
            { name: 'A栋' }
          ],
          links: [
            {
              source: '平台',
              target: '水电合并计量',
              value: 25
            },
            {
              source: '平台',
              target: '新大楼',
              value: 30
            },
            {
              source: '水电合并计量',
              target: '1层',
              value: 6
            },
            {
              source: '水电合并计量',
              target: '5层',
              value: 9
            },
            {
              source: '新大楼',
              target: '1层',
              value: 15
            },
            {
              source: '新大楼',
              target: '2层',
              value: 4
            },
            {
              source: '1层',
              target: '3层',
              value: 5
            },
            {
              source: '1层',
              target: '103房',
              value: 9
            },
            {
              source: '1层',
              target: 'A栋',
              value: 4
            }
          ]
        },
      }
    },
    created() {
      this.$nextTick(() => {
        this.getPowerData()
      })
    },
    methods: {
      formarDate(type, date) {
        return Util.dateFormat(Config.searchDate.find(item => item.date == type).format, date)
      },
      getPowerData(dataType) {
        this.$api.okhttp({
          url:this.$http.adornUrl('/co2/footprint/list'),
          method: "post",
          data: this.$http.adornParams(
            {
              buildingIds: this.buildList,
              date: (this.dataForm.date&&this.dataForm.date!="")? this.formarDate(this.dataForm.dateType,new Date(this.dataForm.date)):'',
              dateType: dataType,
              customerId: this.$util.cookies.get("customer_id"),
              projectId:this.$util.cookies.get("cuuren_projectId")
            }
          )
        }).then((data) => {
          if (data && data.code === 0) {
            let meterdataList = data.data;
            this.drawChart(meterdataList)
          }
        })
      },
      drawChart(data) {
        var chartDom = document.querySelector('#canvas-sankey-container')
        var myChart = echarts.init(chartDom)
        myChart.showLoading()
        myChart.hideLoading()
       // const data = this.json
        console.log(data)
        myChart.setOption({
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
          },
          series: [
            {
              type: 'sankey',
              data: data.nodes,
              links: data.links,
              emphasis: {
                focus: 'adjacency'
              },
              lineStyle: {
                color: 'gradient',
                curveness: 0.5
              }
            }
          ]
        })
      },
    },
  }
</script>

<style>
</style>
